<template>
	<!-- 支付成功界面 -->
	<view class="content">
		<!-- 支付成功提示区域 -->
		<view class="paysuccess">
			<view class="paysuccess_icon">
				<icon color="#ffffff" size="34rpx" type="success"></icon>
				<text style="font-size: 36rpx;color: #FFFFFF;margin-left: 12rpx;">支付成功</text>
			</view>
			<text class="paysuccess_price">实付149.7元，支付宝支付</text>
			<view class="paysuccess_button">
				<text class="paysuccess_button_le">返回首页</text>
				<text class="paysuccess_button_ri">查看订单</text>
			</view>
		</view>
		<!-- 更多推荐 -->
		<index-list>
			<!-- 标题 -->
			<view class="tuijian">
				<text class="tuijian_1"></text>
				<text class="tuijian_2"></text>
				<text class="tjtitle">更多推荐</text>
				<text class="tuijian_2"></text>
				<text class="tuijian_1"></text>
			</view>			
			<!-- 商品列表 -->
		</index-list>
	</view>
</template>

<script>
</script>

<style>
	.paysuccess{
		background-color: #EF3646;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 10rpx;
		padding-bottom: 80rpx;
	}
	.paysuccess_icon{
		display: flex;
		align-items: center;
	}
	.paysuccess_price{
		margin: 30rpx 0;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.paysuccess_button{
		display: flex;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.paysuccess_button_le{
		padding: 10rpx 30rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 50rpx;
		margin-right: 30rpx;
	}
	.paysuccess_button_ri{
		padding: 10rpx 30rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 50rpx;
	}
	
	.tuijian{
		font-size: 26rpx;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
	text[class^="tuijian"]{
		border-radius: 50%;
		padding: 6rpx;
	}
	.tjtitle{
		background-color:#f3f3f3 ;
		margin: 0 20rpx;
	}
	.tuijian_1{
		background-color:#c81b21;
	}
	.tuijian_2{
		background-color: #df868c;
	}
</style>
